<template>

    <div>
      <!--增加-->
      <div class="tools-con1">
        <ul class="tools1 tools">
          <li class="add"  @click="open1 = true"><span>增加</span></li>
        </ul>
      </div>
      <Modal
        title="新增医院"
        v-model="open1"
        :mask-closable="false">
        <div>
          <p class="p">医院:<Input v-model="value" placeholder="请输入医院" style="width: 80%" /></p>
          <p class="p">等级:<Input v-model="value" placeholder="请输入医院等级" style="width: 80%" /></p>
          <p class="p">地址:<Input v-model="value" placeholder="请输入医院地址" style="width: 80%" /></p>
          <p class="p">床位数:<Input v-model="value" placeholder="请输入医院床位数" style="width: 80%" /></p>
          <p class="p">科室数:<Input v-model="value" placeholder="请输入医院科室数" style="width: 80%" /></p>
        </div>
      </Modal>

      <!--删除-->
      <div class="tools-con2">
        <ul class="tools2 tools">
          <li class="del"  @click="open2 = true"><span>删除</span></li>
        </ul>
      </div>
      <Modal
        title="删除"
        v-model="open2"
        :mask-closable="false">
        <p>是否确认删除？</p>
      </Modal>
      <!--修改-->
      <div class="tools-con3">
        <ul class="tools3 tools">
          <li class="change"  @click="open3 = true"><span>修改</span></li>
        </ul>
      </div>
      <Modal
        title="修改"
        v-model="open3"
        :mask-closable="false">
        <div>
          <p class="p">医院:&nbsp;&nbsp;&nbsp;<Input value="上海交通大学医学院附属新华医院" placeholder="请输入医院" style="width: 80%" /></p>
          <p class="p">等级:&nbsp;&nbsp;&nbsp;<Input value="三级甲等" placeholder="请输入医院等级" style="width: 80%" /></p>
          <p class="p">地址:&nbsp;&nbsp;&nbsp;<Input value="上海市杨浦控江路" placeholder="请输入医院地址" style="width: 80%" /></p>
          <p class="p">床位数:<Input value="1586" placeholder="请输入医院床位数" style="width: 80%" /></p>
          <p class="p">科室数:<Input value="57" placeholder="请输入医院科室数" style="width: 80%" /></p>
        </div>
      </Modal>

      <div :class="item.toolscon" v-for="item in items">
        <ul :class="item.tools" class="tools">
          <li :class="item.class"><span>{{item.name}}</span></li>
        </ul>
      </div>

      <!--聚类-->
      <div class="tools-con8">
        <ul class="tools8 tools">
          <li class="visit" @click="open5 = true"><span>聚类</span></li>
        </ul>
      </div>
      <Modal
        title="聚类"
        v-model="open5"
        @on-ok="ok"
        :mask-closable="false" width="1200">
        <div>
          <div class="center">
            <el-row :gutter="20">
              <el-col :span="24" class="h">
                <el-col :span="22">
                  <h3>基本信息</h3>
                </el-col>
              </el-col>
            </el-row>
            <el-row :gutter="20">

              <el-col :span="24" style="padding-top: 20px">
                <el-col :span="11">
                  <div>
                    <span class="spn">cluster基群:</span>
                    <Input v-model="message1" placeholder="" style="width: 400px"/>
                  </div>
                </el-col>
                <el-col :span="11" :offset="2">
                  <div>
                    <span class="spn">城市:</span>
                    <Input v-model="message2" placeholder="" style="width: 400px"/>
                  </div>
                </el-col>
              </el-col>

              <el-col :span="24" style="padding-top: 20px">
                <el-col :span="11">
                  <div>
                    <span class="spn">人员类型:</span>
                    <Input v-model="message3" placeholder="" style="width: 400px"/>
                  </div>
                </el-col>
                <el-col :span="11" :offset="2">
                  <div>
                    <span class="spn">科室:</span>
                    <Input v-model="message4" placeholder="" style="width: 400px"/>
                  </div>
                </el-col>
              </el-col>
              <el-col :span="24" style="padding-top: 20px;">
                <el-col :span="11">
                  <div>
                    <span class="spn">数量:</span>
                    <Input v-model="message5" placeholder="" style="width: 400px"/>
                  </div>
                </el-col>
                <el-col :span="11" :offset="2">
                  <div>
                    <span class="spn">生成人:</span>
                    <Input v-model="message6" placeholder="" style="width: 400px"/>
                  </div>
                </el-col>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24" style="padding-top: 20px;">
                <el-col :span="11">
                  <div>
                    <span class="spn">label下拉:</span>
                    <Select v-model="model1" style="width:400px;padding-left: 20px;">
                      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                  </div>
                </el-col>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24" style="padding-top: 20px;">
                <jlLabel></jlLabel>
              </el-col>
            </el-row>
          </div>
        </div>
      </Modal>
    </div>

</template>

<script>
  import jlLabel from './jlLabel'
  export default{
    components: {
      jlLabel
    },
    data(){
      return {
        open1: false,
        open2: false,
        open3: false,
        open5: false,
        open6: false,
        div: false,
        value: '',
        items: [
/*          {toolscon:'tools-con1',tools:'tools1',class:'add',name:'增加'},
          {toolscon:'tools-con2',tools:'tools2',class:'del',name:'删除'},
          {toolscon:'tools-con3',tools:'tools3',class:'change',name:'修改'},*/
          {toolscon:'tools-con4',tools:'tools4',class:'speak',name:'计划院内会'}
        ],
        cityList: [
          {
            value: '糖尿病2017Q4',
            label: '糖尿病2017Q4'
          },
          {
            value: '糖尿病2017Q4 for Medical',
            label: '糖尿病2017Q4 for Medical'
          },
          {
            value: '糖尿病2018Q4',
            label: '糖尿病2018Q4'
          },
        ],
        model1: '',
        message1: '手工filter选择保存',
        message2: '上海',
        message3: '医生',
        message4: '内分泌科',
        message5: '8794',
        message6: 'DBU-YuTao',
      }
    },
    methods: {
      ok() {
        this.div = true;
        /*        setInterval(() => {
                  this.div = false
                }, 3000)*/
      },
    }
  }
</script>

<!-- 样式 -->
<style scoped>
  @import '../../assets/index.css';
  .tools>li{
    color: #fff;
    list-style-type:none;
    padding: 0 8px 0 40px;
    border: 2px solid #fff;
    line-height: 40px;
    border-radius: 3px;
    font-size: 18px;
  }
  /*一*/
  .tools-con1{
    position: absolute;
    right: 0;
    overflow: hidden;
    z-index: 99;
  }
  .tools1{
    margin-right: -47px;
  }
  .tools1:hover{
    width: 150px;
  }
  /*二*/
  .tools-con2{
    position: absolute;
    right: 0;
    top: 50px;
    overflow: hidden;
    z-index: 99;
  }
  .tools2{
    margin-right: -47px;
  }
  .tools2:hover{
    width: 150px;
  }
  /*三*/
  .tools-con3{
    position: absolute;
    right: 0;
    top: 100px;
    overflow: hidden;
    z-index: 99;
  }
  .tools3{
    margin-right: -47px;
  }
  .tools3:hover{
    width: 150px;
  }
  /*四*/
  .tools-con4{
    position: absolute;
    right: 0;
    top: 150px;
    overflow: hidden;
    z-index: 99;
  }
  .tools4{
    margin-right: -100px;
  }
  .tools4:hover{
    width: 250px;
  }
  /*八*/
  .tools-con8 {
    position: absolute;
    right: 0;
    top: 200px;
    overflow: hidden;
    z-index: 99;
  }
  .tools8 {
    margin-right: -47px;
  }
  .tools8:hover {
    width: 150px;
  }
  .p{
    padding: 10px 0;
    font-size: 15px;
  }
</style>
<style>
  .ivu-input-wrapper{
    padding-left: 20px;
  }
</style>
